{% extends "blog/index.html" %}

{% block title %}
给作者留言  - 残阳似血的博客
{% endblock %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/blog/css/SyntaxHighlighter/shCoreDefault.css"><link> 
<link type="text/css" rel="stylesheet" href="/static/blog/css/jqueryui/jquery-ui-1.8.4.custom.css"><link>
{% endblock %}

{% block js %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script src="/static/blog/js/jquery.form.js"></script> 
<script language="JavaScript" src="/static/blog/js/jquery.pagination.js"></script> 
<script language="JavaScript"> 

	var enable_load = false;
	$(function(){
		$("div#footer-bottom p.bottom-right a:last").click(function(){
			targetOffset = $("body").offset().top;
			$('html,body').stop().animate({scrollTop: targetOffset}, 500);
			return false;
		});
		
		$("#Pagination").pagination("{{ n_message }}",{
			callback:pageselectCallback,
			prev_text: '&laquo 上一页',
			next_text: '下一页 &raquo;',
			items_per_page: 10,
			num_display_entries:6,
			current_page: '{{ page }}',
			num_edge_entries: 2,
			link_to: '#main',
			prev_show_always:false,
			next_show_always:false
		});
	})
	
	function pageselectCallback(page_id, jq) { 
		initData(page_id); 
	} 
	
	function initData(pageIndex){
		if(enable_load){
			$.ajax({
				type: "GET",
			    url: "/contact/page/" + (Number(pageIndex)+1) + "?from=ajax",
			    success: function(msg){
					$("ol#messagelist").empty();
			        $(msg).prependTo("ol#messagelist");
			    }
			});
		}
		else{
			enable_load = true;
		}
	}
	
	function setDialogContent(s, success, callback){
		var s2;
		if(success){
			s2 = "<span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span>";
		}
		else{
			s2 = "<span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 50px 0;'></span>";
		}
		$("#dialog p").html(s2+s);
		
		if(callback != void 0){
			callback();
		}
	}
	
	var regExp = /[\u4e00-\u9fa5]/g;
	function enableAjaxForm(){
		$("#commentform").ajaxForm({
			beforeSubmit:function(arr, $form, options){
				for(a in arr){
					var obj = arr[a];
					var name = obj.name;
					var value = obj.value;
					if((name=='username'||name=='email_address')&&(value==''||typeof value==undefined)){
						setDialogContent("留言失败，昵称或邮箱地址没有填写！", false);
						$('#dialog').dialog('open');
						return false;
					}
					if(name=='content'&&value.match(regExp)==null) {
						$('#replycommentformwrapper').dialog('close');
						setDialogContent("评论失败，评论中必须包含中文！", false);
						$('#dialog').dialog('open');
						return false;
					}
				}
			},
            success:function(responseText,statusText){
                if(responseText == "0"){
					setDialogContent("留言失败，请确保全部信息填写正确！", false);
				}
				else if(responseText == "1"){
					setDialogContent("留言成功，在刷新后您的留言将会显示！", true);
				}
				$('#dialog').dialog('open');
            }
        });
	}
	
	$(function(){
		$('#dialog').dialog({
			autoOpen: false,
			show: 'blind',
			hide: 'explode',
			modal: true,
			buttons: {
				'确认': function() {
					$(this).dialog('close');
				}
			}
		});
		
		enableAjaxForm();
		
		$("input#logout").click(function(){
			location.href = "/logout/";
			return false;
		})
		$("span#expand").click(function(){
			$("input#logout").toggle(200);
			$("span#expand span.ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-w");
		})
		
		$('body').ajaxStart(function(){
			$(this).addClass('overlay')
		});
		$('body').ajaxComplete(function(){
			$(this).removeClass('overlay')
		});
	});
	
	
</script> 
{% endblock %}

{% block nav %}
	<li><a href="{% url program %}">首页</a></li>
	<li><a href="{% url program-categories %}">分类</a></li>
	<li id="current"><a href="{% url program-contact %}">留言板</a></li>
	<li><a href="{% url program-about %}">关于</a></li>
{% endblock nav %}

{% block content %}

	{% if n_message > 0 %}
	<div class="post">
	<p class="highlight">留言给作者（可以登录并同步发送至新浪微博）</p> 
	</div>
	<div id="comment" class="post-bottom-section"{% if n_message == 0 %} style="border:0px; margin:0; padding:0;"{% endif %}>
		<h4>共有{{ n_message }}条留言</h4>
	
    <div class="right">
		
    	<ol id="messagelist" class="commentlist">
			{% for m in messages %}
		        <li id="message-{{ m.id }}">
		            <div class="comment-info">
						<img alt="" src="{% if m.avatar %}{{ m.avatar }}{% else %}/static/blog/images/gravatar.jpg{% endif %}" class="avatar" height="40" width="40" />
						<cite>
							<a href="{% if m.site %}{{ m.site }}{% else %}#message-{{ m.id }}{% endif %}"{% if m.weibo_name %} wb_screen_name="{{ m.weibo_name }}"{% endif %}>{{ m.username }}</a> 说： <br />
							<span class="comment-data"><a href="#message-{{ m.id }}" title="">{{ m.post_date|date:"Y年 bj日 P" }}</a></span>
						</cite>
					</div>
					<div class="comment-text">
						<p>{{ m.content|safe }}</p>
					</div>

		        </li>
		    {% endfor %}

		</ol>
			
    </div>
	</div>
	{% if n_message > 10 %}
		    <div id="Pagination" class="pagination"></div>
	{% endif %}
	{% else %}
	<div class="post">
	<p class="highlight">目前还没有留言</p> 
	</div>
	{% endif %}
 
 
	<div class="post-bottom-section">

		<h4>给作者留言</h4>

    <div class="right">

    	<form action="{% url program-message %}" method="post" id="commentform">
    		{{ form.avatar }}
       	<p>
			 		<label for="username">昵称 (必填){{ form.username.errors }}</label><br />
					{{ form.username }}
				</p>
          <p>
				 	<label for="email_address">电子邮箱 (会为你保密) (必填)</label><br />
					{{ form.email_address }}
				</p>
          <p>
					<label for="site">网址</label><br />
					{{ form.site }}
				</p>
          <p>
					<label for="content">您的留言</label><br />
					{{ form.content }}
				</p>
          <p class="no-border">				
		            <input class="button" type="submit" value="提交留言" />	
					{% if weibo_log %}
					<input type="checkbox" id="sendWeibo" name="sendWeibo" value ="true" checked="checked">同时发送至微博
					<span id="logout-wrapper">
					<input id="logout" class="button" type="submit" value="退出新浪微博" />
					<span id="expand" class="ui-state-default ui-corner-all" title="展开"><span class="ui-icon ui-icon-triangle-1-e"></span></span>
					</span>
					{% endif %}
				</p>

       </form>

    </div>
	
</div>

<!-- hidden-area -->
<div id="dialog" title="需要提醒您："> 
	<p></p> 
</div>
{% endblock %}